<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item>
          <el-input v-model="roleNames.roleName" placeholder="角色名称"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
          <el-button @click="clearSearch">清空</el-button>
        </el-form-item>
      </el-form>

      <div style="margin: 20px 0">
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        <el-button type="danger" :disabled="ids.length === 0" @click="batchRemove">批量删除</el-button>
      </div>

    <el-table
      border
      stripe
      style="width: 960px"
      v-loading="listLoading"
      :data="pageList"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55" />

      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center">
      </el-table-column>

      <el-table-column label="角色名称">
        <template slot-scope="scope">
          <template v-if="scope.row.showInp">
            <el-input v-model="scope.row.editRoleName" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="Refresh"
              type="warning"
              @click="cancelEdit(scope.row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="info" icon="el-icon-info" @click="toAuth(scope.row)" title="分配权限"/>

          <el-button size="small" type="primary" icon="el-icon-check" @click="updateRole(scope.row)" title="确定"/>
          <el-button size="small" type="primary" @click="editRole(scope.row)" icon="el-icon-edit-outline" title="修改角色"/>
          <el-popconfirm
            :title="`确定要删除[${scope.row.roleName}]吗？`"
            @confirm="delById(scope.row)"
          >
            <el-button slot="reference" class="ml_10" size="small" type="danger" icon="el-icon-delete" title="删除角色" />
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageState.page"
      :page-size="pageState.limit"
      :total="total"
      :page-sizes="[5, 10, 20, 30]"
      style="padding: 20px 0"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="currentChange "
      @size-change="currentChange(1, $event)"
    />

    <el-dialog
      title="添加角色"
      :visible.sync="dialogVisible"
      width="30%"
      @close="cancelRole"
    >
      <h4>请输入新名称</h4>
      <el-form>
        <el-form-item>
          <el-input v-model="newRoleName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelRole">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import {mapActions,mapState} from 'vuex'
import {cloneDeep} from 'lodash'
export default {
  name: "Role",
  data(){
    return {
      roleNames:{
        roleName:''
      },
      roles:[],
      listLoading:false,
      pageState:{
        page:1,
        limit:5,
      },
      dialogVisible:false,
      newRoleName:'',
      ids:[]
    }
  },
  methods:{
    ...mapActions('aclRole',
      [
        'getPageList',
        'saveRole',
        'removeRoles',
        'removeById',
        'updateById',
      ]
    ),
    // 表格复选框回调
    handleSelectionChange(e){
      this.ids = e.map(item => item.id)
    },
    // 分页器点击回调
    currentChange(page,limit){
      this.pageState.page = page
      if(limit){
        this.pageState.limit = limit 
      }
      this.setPageList(this.pageState)
    },
    // 设置loading函数
    async setPageList(params){
      this.listLoading = true
      await this.getPageList(params)
      this.listLoading = false
    },
    // 搜索回调
    searchHandle(){
      if(!this.roleNames.roleName){
        Message.error('输入不能为空')
        return 
      }

      const newParams = cloneDeep(this.pageState)
      newParams.roleName = this.roleNames.roleName

      this.setPageList(newParams)
    },
    // 清空回调
    clearSearch(){
      this.roleNames.roleName = ''
      console.log(this.pageState);
      this.setPageList(this.pageState)
    },
    // 添加确定
    async addRole(){
      await this.saveRole({roleName:this.newRoleName})
      this.cancelRole()
      this.setPageList(this.pageState)
    },
    // 添加取消
    cancelRole(){
      this.dialogVisible = false
      this.newRoleName = ''
    },
    // 批量删除回调
    batchRemove(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        try {
          this.removeRoles(this.ids).then(()=>{
            this.$message({
              type: 'success',
              message: '批量删除成功!'
            });  
            this.setPageList(this.pageState)
          })
        } catch (error) {
          Message.error('批量删除失败')
        } 

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async delById(row){
      await this.removeById(row.id)
      this.setPageList(this.pageState)
    },
    editRole(row){
      if(!row.showInp){
        row.showInp = true
      }
    },
    async updateRole(row){
      if(row.showInp){
        row.roleName = row.editRoleName
        await this.updateById(row)
        this.setPageList(this.pageState)
      }else {
        Message('未修改')
      }

    },
    cancelEdit(row){
      row.editRoleName = row.roleName
      row.showInp = false
      Message.info('取消编辑')
    },
    toAuth(row){
      this.$router.push(`/acl/role/auth/${row.id}/${row.roleName}`)
    }
  },
  computed:{
    ...mapState({
      total:state => state.aclRole.total,
      pageList:state => state.aclRole.pageList
    })
  },

  mounted(){
    this.setPageList(this.pageState)
  }
}
</script>

<style scoped>

</style>